.btn {
  $color: theme-color();

  display: inline-block;
  font-weight: $btn-font-weight;
  text-align: center;
  white-space: nowrap;
  @include text-default-style;
  @include button-size($input-btn-padding-y, $input-btn-padding-x, $font-size-base, $input-btn-line-height, $btn-border-radius);
  border: $btn-border-width solid $btn-border-color;
  background-color: #fff;

  @include text {
    display: inline-block;
  }
  &:hover, &:focus {
    border-color: $color;
    background-color: #fff;

    @include text {
      color: $color;
    }
  }
  &:active, &.active {
    border-color: darken($color, 10%);
    background-color: #fff;

    @include text {
      color: darken($color, 10%);
    }
  }
  &:focus {
    box-shadow: 0 0 0 $input-btn-focus-width rgba($color, .2);
  }
}


//
// Alternate buttons
//

@each $color, $value in map-merge($colors, $theme-colors) {
  .btn-#{$color} {
    @include button-variant($value, $value);
  }
  .btn-outline-#{$color} {
    @if $color == "light" {
      @include button-outline-variant($value, $gray-900);
    } @else {
      @include button-outline-variant($value, $white);
    }
  }
}

.btn.btn-link {
  $color: theme-color();

  border-color: transparent;
  background-color: transparent;

  @include text {
    color: $color;
  }
  &:hover {
    @include text {
      color: lighten($color, 10%);
    }
  }
  &:active, &.active {
    @include text {
      color: darken($color, 10%);
    }
  }
  &:focus {
    box-shadow: 0 0 0 $input-btn-focus-width rgba($color, .2);
  }
}

//
// Button Sizes
//

.btn-lg {
  @include button-size($input-btn-padding-y-lg, $input-btn-padding-x-lg, $font-size-lg, $input-btn-line-height-lg, $btn-border-radius-lg);
}

.btn-sm {
  @include button-size($input-btn-padding-y-sm, $input-btn-padding-x-sm, $font-size-sm, $input-btn-line-height-sm, $btn-border-radius-sm);
}


//
// Block button
//

.btn-block {
  display: block;
  width: 100%;
}
